.student-management {
  padding: 24px;
  background: #f5f5f5;
  min-height: 100vh;

  .stats-row {
    margin-bottom: 24px;

    .ant-card {
      text-align: center;
      
      .ant-statistic-title {
        font-size: 14px;
        color: #666;
      }
      
      .ant-statistic-content {
        font-size: 24px;
        font-weight: bold;
      }
    }
  }

  .search-card {
    margin-bottom: 24px;
    
    .ant-row {
      align-items: center;
    }
  }

  .table-card {
    .ant-table-thead > tr > th {
      background: #fafafa;
      font-weight: 600;
    }

    .student-info {
      display: flex;
      align-items: center;
      gap: 12px;

      .student-details {
        flex: 1;

        .student-name {
          font-weight: 600;
          font-size: 14px;
          color: #333;
          margin-bottom: 4px;
        }

        .student-username {
          font-size: 12px;
          color: #999;
          margin-bottom: 4px;
        }

        .student-contact {
          font-size: 12px;
          color: #666;

          span {
            margin-right: 8px;
          }
        }
      }
    }

    .lesson-stats {
      .lesson-count {
        font-weight: 600;
        color: #1890ff;
        margin-bottom: 4px;
      }

      .lesson-used {
        font-size: 12px;
        color: #666;
      }
    }

    .remaining-lessons {
      .lesson-number {
        font-weight: 600;
        color: #52c41a;
        margin-bottom: 4px;
        display: block;
      }
    }

    .completion-rate {
      .ant-progress-text {
        font-size: 12px;
      }
    }

    .total-spent {
      font-weight: 600;
      color: #cf1322;
    }
  }

  .ant-modal-body {
    max-height: 70vh;
    overflow-y: auto;
  }
}

// 响应式设计
@media (max-width: 768px) {
  .student-management {
    padding: 16px;

    .stats-row {
      .ant-col {
        margin-bottom: 16px;
      }
    }

    .search-card {
      .ant-col {
        margin-bottom: 16px;
      }
    }

    .table-card {
      .ant-table {
        font-size: 12px;
      }

      .student-info {
        flex-direction: column;
        text-align: center;
        gap: 8px;
      }
    }
  }
} 